<template>
  <view v-show="show" :style="{ paddingTop, paddingBottom }">
    <view class="co-empty am-flex-col-center">
      <view>
        <image
          :src="src"
          mode="aspectFill"
          v-if="!!src"
          :style="{ width: imgWidth, height: imgHeight }"
        ></image>
        <template v-else>
          <image
            :src="curModeConfig.icon"
            mode="aspectFill"
            class="co-empty__data-img"
            :style="{
              width: curModeConfig.width,
              height: curModeConfig.height
            }"
            webp
          ></image>
        </template>
      </view>
      <view class="">
        <text class="co-empty__bd-text" :style="{ color, fontSize }">{{
          bdText
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
const typeConfig = {
  data: {
    text: '暂无数据',
    icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/19/e900323b051a44f59b0a85e2fecb19da暂无数据@2x.png',
    width: '329rpx',
    height: '262rpx'
  },
  network: {
    text: '网络异常，请刷新',
    icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/19/e900323b051a44f59b0a85e2fecb19da暂无数据@2x.png',
    width: '302rpx',
    height: '264rpx'
  }
}
export default {
  name: 'co-empty',
  props: {
    // 是否显示组件
    show: {
      type: Boolean,
      default: () => true
    },
    // 类型
    model: {
      type: String,
      default: () => 'data',
      validator(val) {
        return ['data', 'network'].includes(val)
      }
    },
    // 文本
    text: {
      type: String
    },
    // 文本颜色
    color: {
      type: String,
      default: () => '#666'
    },
    // 字体大小
    fontSize: {
      type: String,
      default: () => '32rpx'
    },
    // 自定义图标地址。如果存在，model 将失效
    src: {
      type: String
    },
    // 自定义图标的宽度
    imgWidth: {
      type: String,
      default: () => '180rpx'
    },
    // 自定义图标的高度
    imgHeight: {
      type: String,
      default: () => '180rpx'
    },
    // 上内边距
    paddingTop: {
      type: String
    },
    // 下内边距
    paddingBottom: {
      type: String
    }
  },
  data() {
    return {}
  },
  computed: {
    bdText() {
      if (this.text) {
        return this.text
      } else if (typeConfig[this.model]) {
        return typeConfig[this.model].text
      } else {
        return '暂无数据'
      }
    },
    curModeConfig() {
      if (this.model) {
        return typeConfig[this.model] || {}
      } else {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.co-empty {
}
.co-empty__data-img {
  width: 329rpx;
}
.co-empty__bd-text {
  display: inline-block;
  margin-top: 36rpx;
}
</style>
